import { Typography, Image } from 'antd';
import '../../assets/css/life.css';

const { Title } = Typography;

const Life = () => {
  const lifePhotos = [
    {
      image: '/images/works/1.jpg',
      title: '学术交流',
      description: '参加国际学术会议',
    },
    {
      image: '/images/works/2.jpg',
      title: '团队合作',
      description: '项目开发讨论',
    },
    {
      image: '/images/works/3.jpg',
      title: '技术分享',
      description: '技术交流会演讲',
    },
    {
      image: '/images/works/4.jpg',
      title: '户外活动',
      description: '野外考察调研',
    },
    {
      image: '/images/works/5.jpg',
      title: '日常学习',
      description: '图书馆研习',
    },
    {
      image: '/images/works/6.jpg',
      title: '兴趣爱好',
      description: '摄影作品展示',
    },
  ];

  return (
    <section id="life" className="life-section">
      <div className="life-container">
        <Title level={1} className="section-title">生活</Title>
        
        <div className="life-grid">
          {lifePhotos.map((photo, index) => (
            <div key={index} className="life-item">
              <Image
                src={photo.image}
                alt={photo.title}
                className="life-image"
                preview={false}
              />
              <div className="life-info">
                <h3 className="life-title">{photo.title}</h3>
                <div className="life-description">{photo.description}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Life;